<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
</head>
<body>
<div class="container">
    <input class="book"  placeholder="输入书名搜索" value="<%=q%>">
    <ul class="results">
        <% results.forEach(function(item){%>
        <li onclick="location.href = '/kindle/novel?url=<%=item.link%>'">
            <h3 class="book-name" ><%=item.title %></h3>
            <% if (item.all.length) { %>
            <% item.all.forEach(function(info){%>
            <p ><%=info %></p>
            <% })} %>
            <p>简介：<%=item.desc %></p>
        </li>
        <% }) %>

    </ul>

</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
        $('.book').on('keydown',function (e) {
            var q = $(this).val();
           if( e.keyCode==13 ){
                e.preventDefault();
                if(q.trim()!=''){
                    location.href = '/kindle?q='+ encodeURIComponent(q)
                }
           }
        })
    })
</script>
<style>
    .container{
        padding: 45px 0 55px;
        min-height: calc(100vh - 100px);
        overflow-y: scroll;
        text-align: center;
        background: #4e81cf;
    }
    .results{
        list-style: none;
        color: #fff;
        text-align: left;
        margin: 0;
        padding: 0;
    }
    .results li{
        border-bottom: 1px solid #fff;
        padding: 10px 20px;
    }
    .mt{
        margin-top: 40vh;
    }
    .book{
        border-radius: 5px;
        border: 1px solid #fff;
        outline: none;
        text-indent: 0.5em;
        line-height: 2em;
        font-size: 1.1em;
        width: 80vw;
        transition: all 1s;
    }
    .book-name{
        text-decoration: none;
        font-size: 1.3em;
        color: #fff;
    }
</style>
</html>